<template>
  <div class="prolist">
    <div class="goods-content" v-for="item of this.prolist" :key="item.kindid"  @click="toDetail(item.kindid)">
      <div class="proimg">
        <img :src="item.picPath" :alt="item.title">
        <div class="title">{{ item.title }}</div>
      </div>
      <div class="discount-box">
          <div class="drugname">{{ item.Drugname}}</div>
          <p class="express">{{ item.label | label}}</p>
          <span class="real-price">{{'￥' + item.price }}</span>
          <p class="sales">{{ item.SalesVolume }}人付款</p>
          <label class="iconfont icon-gouwuche-xianxing shop-cart" @click.stop="addCart(item.kindid)">购物车</label>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from '@/utils/request2'
import { Toast } from 'vant'
export default {
  props: [ 'prolist' ],
  methods: {
    toDetail (kindid) {
      this.$router.push('/detail?kindid=' + kindid)
    },
    // 点击商品上面的购物车标志将商品加入购物车
    addCart (kindid) {
      let userid = localStorage.getItem('userid')
      let num = 1
      // console.log(kindid)
      let url = '/cart/add?userid=' + userid + '&kindid=' + kindid + '&num=' + num
      this.loginStore(url).then(res => {
        if (res.code === 200) {
          console.log(url)
          Toast('加入购物车成功')
        } else {
          this.$router.push('/login')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.prolist {
  margin:  0;
  @include rect(100%, 5.4rem);
  overflow: auto;
  @include background-color(rgb(243, 243, 243));
  overflow-y: auto;
  .goods-content {
    float: left;
    @include rect(100%, 1.17rem);
    margin: 0.01rem;
    margin-top: 0.02rem;
    // margin-right: 0.05rem;
    @include background-color(#fff);
    .proimg {
      float: left;
      @include rect(.9rem, .9rem);
      @include background-color(#f66);
      @include margin(0.05rem);
      img {
        @include display(block);
        @include rect(100%, 100%);
        @include display(block);
      }
      .title {
        @include color(#333);
        @include font-size(0.14rem);
        padding: 0 0.1rem;
        width: 0.9rem;
        height: 0.21rem;
        white-space: nowrap;
        // @include overflow(hidden);
        text-overflow: ellipsis;
      }
    }
    .discount-box {
      float: left;
      height: .9rem;
      position: relative;
      width: auto;
      .shop-cart {
        position: absolute;
        right: .04rem;
        bottom: .04rem;
        color: #ff7100;
        font-size: 0.07rem;
        border: 1px #efefef solid;
      }
      .drugname {
        font-size: .11rem;
        background: #fff;
        width: 1.78rem;
        margin-top: .07rem;
        display: block;
        vertical-align: middle;
        padding: 0 .05rem;
        color: #333;
        text-overflow: ellipsis;
      }
      .express {
        font-size: .11rem;
        width: 1.78rem;
        background: #fef5e6;
        margin-top: .07rem;
        border-radius: .1rem;
        display: block;
        vertical-align: middle;
        color: #ff7100;
      }
      .sales {
        font-size: .11rem;
        background: #fff;
        margin-top: .02rem;
        border-radius: .1rem;
        display: block;
        vertical-align: middle;
        padding: 0 .05rem;
        color: #333;
        text-overflow: ellipsis;
      }
      span {
        font-size: .16rem;
        margin-top: .07rem;
        color: #ff7100;
        display: block;
        vertical-align: middle;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
